<template>
  <div>
    <!-- 文件路径 -->
    <el-page-header :title="'上一级'" @back="goBack">
      <template #content>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item @click="handlePrefixClick()">
            <span class="file-path">全部</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item, index) in prefix" :key="index" @click="handlePrefixClick(item)">
            <span class="file-path">{{ item.name }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </el-page-header>
    <el-table :data="folderList" v-loading="folderListLoading" :show-header="false" class="file-table" max-height="calc(100vh - 300px)" stripe>
      <el-table-column label="名称" min-width="300">
        <template #default="{ row }">
          <div class="file-item-box">
            <div class="file-item">
              <img class="file-img" :src="row.fileExt" alt />
              <span class="file-name" @click="handleFolderClick(row)">{{ row.name }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <PaginationView
      :total="moveQueryData.total"
      :pageSize="moveQueryData.pageSize"
      :currentPage="moveQueryData.currentPage"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @refreshList="handleSearch"
    />
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { folderSelectPage } from '@/api/folder'

const moveQueryData = ref({
  currentPage: 1,
  pageSize: 10,
  pid: 0,
})
const folderList = ref([])
const folderListLoading = ref(false)
const getFolderList = async () => {
  folderListLoading.value = true
  const res = await folderSelectPage(moveQueryData.value).finally(() => {
    folderListLoading.value = false
  })
  folderList.value = res.data.list.map((item) => {
    return {
      ...item,
      fileExt: require(`@/assets/sourceManage/folder.svg`),
    }
  })
  moveQueryData.value.total = res.data.total
}
// 移动 点击进入选择文件夹
const curFolder = ref(null)
const handleFolderClick = (row) => {
  curFolder.value = row
  prefix.value.push(row)
  moveQueryData.value.pid = row.id
  getFolderList()
}

// 文件路径(面包屑)
const prefix = ref([])
// 点击路径面包屑
const handlePrefixClick = (val) => {
  curFolder.value = val
  if (!val) {
    prefix.value = []
    moveQueryData.value.pid = 0
    getFolderList()
  } else if (val.name == prefix.value[prefix.value.length - 1].name) {
    //点击本级
    getFolderList()
  } else {
    //点击路径
    let curIndex = prefix.value.findIndex((item) => item.name == val.name)
    prefix.value = prefix.value.slice(0, curIndex + 1)
    moveQueryData.value.pid = val.id
    getFolderList()
  }
}
// 返回上一级
const goBack = () => {
  if (prefix.value.length > 0) {
    console.log('prefix.value', prefix.value)
    let lastFolder = prefix.value[prefix.value.length - 2]
    console.log('lastFolder', lastFolder)
    if (lastFolder) {
      curFolder.value = lastFolder
      moveQueryData.value.pid = lastFolder.id
      prefix.value.pop()
    } else {
      curFolder.value = null
      moveQueryData.value.pid = 0
      prefix.value = []
    }
    getFolderList()
  }
}
const handleSizeChange = (size) => {
  moveQueryData.value.pageSize = size
  getFolderList()
}
const handleCurrentChange = (page) => {
  moveQueryData.value.currentPage = page
  getFolderList()
}
const handleSearch = () => {
  moveQueryData.value.currentPage = 1
  getFolderList()
}
handleSearch()

defineExpose({
  moveQueryData,
})
</script>
<style scoped lang='scss'>
::v-deep(.el-table__body .el-table__cell){
  padding: 0;
}
.file-item-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  .file-item {
    display: flex;
    align-items: center;
    max-width: 75%;
    .thumb-box {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      .thumb-img {
        max-width: 100%;
        max-height: 100%;
      }
    }
    .file-name {
      cursor: pointer;
    }
    .file-img {
      width: 18px !important;
      height: 18px !important;
      margin-right: 10px;
    }
  }
  &:hover {
    .operation-buttons {
      display: flex !important;
    }
    .file-name {
      text-decoration: underline;
    }
  }
}
.file-path {
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}
</style>